<script setup>
  import {ref} from 'vue';
  // var msg="你好啊";
  const msg=ref("你好");
  // 绑定数据绑定值
  const htmlA=ref("<span style='color:indianred'>abcdrfg</span>");
  const bindA=ref("height:100px;width:100px;background-color:green;");
  const num=ref(1);

  const islogin=ref(false);
  const loginname=ref("未登录");
  function clickA(){
    console.log('执行了A');
    //更改绑定的数据
    msg.value="hello world";
    htmlA.value="<span style='color:lightpink'>上山打老虎</span>";
    bindA.value="height:200px;width:200px;background-color:skyblue;"
    islogin.value=!islogin.value;

  }
</script>
<template>
  <span>消息是：{{msg}}</span>
  <div v-html='htmlA'></div>
  <button @click='clickA()'>点击按钮</button>
  <div :style="bindA"></div>
  <button @click='num++'>{{num}}</button>

  <span v-if="islogin">张三</span>
  <span v-else>未登录</span>
</template>